<template>
    <div >
      <img class="logo" src="@/assets/logo.png" alt="">
      <h3>欢迎登陆网易云音乐</h3>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <i class="el-icon-phone"></i>
          <el-form-item label="手机号码" prop="phone">
            <el-input class="phone" v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <i class="el-icon-unlock"></i>
          <el-form-item class="pass" label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item>
            <el-button type="primary" class="btn1" @click="submitForm('ruleForm')">登录</el-button>
            <el-button class="btn2" @click="resetForm('ruleForm')">注册</el-button>
          </el-form-item>
      </el-form>
       <p>没有账号？去注册</p>
    </div>
</template>

<script>
  //引入请求api
  import { login } from "@/api" 
  //映射vuex
  import { mapMutations } from "vuex"
  export default {
    data() {
       var validatePhone = (rule, value, callback) => {
        if (value == "") {
          callback(new Error("请输入手机号码"));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          callback();
        }
      };
     
      return {
        ruleForm: {
          phone: "",
          password: ""
        },
        rules: {
          phone: [{ validator: validatePhone, trigger: "blur" }],
          password: [{ validator: validatePass, trigger: "blur" }]
        }
      };
    },
    methods: {
       ...mapMutations(["setNickname"]),
      submitForm(formName) {
        // 登入动画
        // const loading = this.$loading({
        //   lock: true,
        //   text: '正在登录',
        //   spinner: 'el-icon-loading',
        //   background: 'rgba(0, 0, 0, 0.7)' 
        // })
        //element-ui固定的表单验证方法
        this.$refs[formName].validate(valid => {
          if (valid) {
            //登入逻辑写在此处
            let data = {
              phone: this.ruleForm.phone,
              password: this.ruleForm.password
            }
            login(data)
              .then(res => {
                if(res.data.code==200){
                  alert("登录成功，跳转主页")
                  // 登录成功跳转主页
                  // this.$router.push("/")
                  //设置vuex nickname状态
                  let nickname = res.data.profile.nickname
                  this.setNickname(nickname)
                }else{
                  alert("手机号或密码错误！")
                }
               console.log(res)
              })
              .catch(err => {
                //出错了 也要关闭动画
                loading.close()
              })
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };
</script>

<style>
  .logo{
    width:100%;
    height: 400px;
    margin-bottom: 80px;;
  }
  h3{
    font-size: 44px;
  }
  .el-form-item__label {
    position: relative;
    left: -200px;
    top:0px;
    float: none;
    font-size: 36px;
    line-height: 100px;
}
.el-icon-phone{
   position: relative;
    left: -305px;
    top:80px;
    font-size: 60px;
}
.el-icon-unlock{
   position: relative;
    left: -305px;
    top:83px;
    font-size: 60px;
}
.el-form-item {
    margin-bottom: 12px;
}

.el-input__inner {
    width: 400px;
    margin-bottom: 100px;
    height: 88px;
    position: absolute;
    left: 200px;
    top: -100px;
    border: 2px solid black;
    border-radius: 15px;
    font-size:50px;
}

.demo-ruleForm {
    position: relative;
}

.btn1 {
    position: absolute;
    left: 89px;
    top:40px;
    width: 200px;
    height: 80px;
    font-size: 32px;
    border-radius: 20px;
}

.btn2 {
    position: absolute;
    left: 390px;
     top:40px;
    width: 200px;
    height: 80px;
    font-size: 32px;
    border-radius: 20px;
    background: gray
}
p{
  position: relative;
  top:300px;
  font-size: 32px;
  color: grey;
}
</style>